"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/31
 */
import * as React from 'react'
import {commonStyles} from "../assets/styles/common";
import {inPutProps, searchBarStyles} from "../assets/styles/searchBar";
import MyIcon from "./icon";
import {SearchBarProps} from "../interface/index";
import MyText from "./MyText";

const {View, TextInput, TouchableOpacity,PanResponder} = require('react-native');
const {connect} = require('react-redux');

class SearchBar extends React.Component<SearchBarProps, any> {

    static defaultProps = {
        placeholder: '搜索',
        rightButtonWidth: 60,
        leftButtonWidth: 0,
        leftIconName:'icon-sousuo',
        onPress: null
    };


    getPaddingStyle = () => ({paddingRight: this.props.rightButtonWidth+10, paddingLeft: this.props.leftButtonWidth+10});

    renderContent = ()=>{

        if(this.props.onPress){
            return (
                <TouchableOpacity style={searchBarStyles.textInputContainer}
                                  activeOpacity={1}
                                  onPress={this.props.onPress}>
                    <MyIcon name={this.props.leftIconName} size={20} color='#999999'/>
                    <MyText color={'#999'} style={{marginLeft:10}}>{this.props.placeholder||'搜索...'}</MyText>
                    {/*<TextInput {...inPutProps}*/}
                               {/*{...this.props}*/}
                               {/*style={[commonStyles.flex1, searchBarStyles.input]}/>*/}
                </TouchableOpacity>
            )
        }
        return (
            <View style={searchBarStyles.textInputContainer} onPress={this.props.onPress}>
                <MyIcon name={this.props.leftIconName} size={20} color='#999999'/>
                <TextInput {...inPutProps}
                           {...this.props}
                           style={[commonStyles.flex1, searchBarStyles.input]}/>
            </View>
        )

    };


    render() {
        return (
            <View style={[commonStyles.flex1, searchBarStyles.container, {...this.getPaddingStyle()}]}
                              activeOpacity={1} >
                {this.renderContent()}
            </View>
        );
    }
}


export default SearchBar;